<template>
	<view>
		<cu-custom bgImage="https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg" :isBack="false">
			<block slot="content">好友列表</block>
		</cu-custom>
		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="输入搜索的关键词" confirm-type="search" v-model="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
			</view>
		</view>
		<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
		 :scroll-with-animation="true" :enable-back-to-top="true">
			<block v-for="(item,index) in list" :key="index">
				<view :class="'indexItem-' + item.firstchrater" :id="'indexes-' + item.firstchrater" :data-index="item.firstchrater">
					<view class="padding" v-show="search.length==0">{{item.firstchrater}}</view>
					<view class="cu-list menu-avatar no-padding">
						<view class="cu-item" v-show="search.length==0||items.friendNickName.indexOf(search)!=-1" v-for="(items,sub) in item.list" :key="sub" @click="toMessageDetail(items)">
							<view class="cu-avatar round lg" :style="'background-image:url('+items.userHeadPortrait+'),url(/static/img/none.jpg);'"/>
							<view class="content">
								<view class="text-grey">{{items.friendNickName}}</view>
								<view class="text-gray text-sm">
									{{items.friendMobile}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<view class="indexBar" :style="[{height:'calc(100vh - ' + CustomBar + 'px - 50px)'}]" v-show="search.length==0">
			<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
				<view class="indexBar-item" v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur" @touchend="setCur"> {{item.firstchrater}}</view>
			</view>
		</view>
		<!--选择显示-->
		<view v-show="!hidden" class="indexToast">
			{{listCur}}
		</view>
	</view>
</template>

<script>
	import cnchar from 'cnchar';
	import cuCustom from '@/components/colorui/cu-custom.vue'
	export default {
		components: { cuCustom },
		data() {
			return {
				CustomBar: this.CustomBar,
				hidden: true,
				listCurID: '',
				list: [],
				listCur: '',
				search:''
			};
		},
		onShow() {
			this.onRefresh();
			this.listCur = this.list[0];
		},
		onReady() {
			let that = this;
			uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
				that.boxTop = res.top
			}).exec();
			uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
				that.barTop = res.top
			}).exec()
		},
		methods: {
			onRefresh() {
				console.log('onRefresh');
				let user=this.$store.state.userInfo;
				let myCnchar=cnchar;
				this.list=[];
				// #ifndef  H5
				let sql = 'SELECT a.* FROM "rcontact" a   WHERE "userId"=\'{0}\' order by friendNickName asc'.format(user.userId);
				this.db.selectSQL(
					sql,
					function(datas) {
						let lastFlag='';
						for (let data of datas) {
							//首字符转拼音取首字符大写
							data.firstchrater=myCnchar.spell(data.friendNickName.substring(0,1),'first','up');
							data.userHeadPortrait = this.getImgUrl('user',data.friendId);
							if(lastFlag==data.firstchrater){
								this.list[this.list.length-1].list.push(data);
							}else{
								lastFlag=data.firstchrater;
								let friends={
									firstchrater:lastFlag,
									list:[data]
								}
								this.list.push(friends);
								
							}
						}
/* 						datas.sort(function(a,b){
							let x = a[firstchrater];
							let y = b[firstchrater];
							return((x<y)?-1:((x>y)?1:0));
						}); */
					}.bind(this)
				);
				// #endif
				// #ifdef  H5
				this.list = [
					{
						firstchrater:'M',
						list:[
							{
								friendNickName:'默默',
								friendMobile:'111111111',
								friendId:'31',
							},
							{
								friendNickName:'默默2',
								friendMobile:'111111111222',
								friendId:'32',
							}
						]
					}
				];
				// #endif
			},
			toMessageDetail(item) {
					console.log('进入到聊天界面' );
					item.from=item.friendId;
					item.group_id=item.friendId+"-"+item.userId
					var params=encodeURIComponent(JSON.stringify(item))
					uni.navigateTo({
						url:'/pages/chat/chat?params=' + params
					})
			},
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].friendNickName;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					this.listCur = that.list[num].firstchrater
				};
			},

			//触发全部开始选择
			tStart() {
				this.hidden = false
			},

			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			indexSelect(e) {
				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i].friendNickName;
						that.movableY = i * 20
						return false
					}
				}
			}
		}
	}
</script>

<style>
	page {
		padding-top: 100upx;
	}

	.indexes {
		position: relative;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
</style>
